import React, { PureComponent } from 'react';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

import { Row, Col, Select, Spin } from 'antd';

const { Option } = Select;
@connect(({ inservicematerial, loading }) => ({
  inservicematerial,
  loading: loading.models.inservicematerial,
}))
@Form.create()
class AddMetialModal extends PureComponent {
  state = {};

  componentDidMount() {}

  changeBig = value => {
    if (value) {
      const { changeBig } = this.props;
      changeBig(value);
    }
  };

  changeBigcode = value => {
    const { changeBigcode } = this.props;
    changeBigcode(value);
  };

  inputChange = value => {
    const { inputChange } = this.props;
    inputChange(value);
  };

  render() {
    const {
      form,
      inputType,
      inservicematerial: { bigResult },
      loading,
    } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayoutMat = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const inpuOption = inputType.map(value => (
      <Option key={value.itemCode}>{value.itemName}</Option>
    ));
    const bigChildren = bigResult.map(value => <Option key={value.matId}>{value.matName}</Option>);

    return (
      <div>
        <Row gutter={8}>
          <Col span={12}>
            <Form.Item {...formItemLayoutMat} label="材料名称：">
              {getFieldDecorator('matName', {
                rules: [
                  {
                    required: false,
                    message: '请输入材料名称：',
                  },
                ],
              })(
                <Select
                  filterOption={false}
                  showSearch
                  onSearch={this.changeBig}
                  onSelect={this.changeBigcode}
                  notFoundContent={loading ? <Spin size="small" /> : '暂无数据'}
                  style={{ width: '100%' }}
                  placeholder="请输入材料名称"
                >
                  {bigChildren}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayoutMat} label="材料类型:">
              {getFieldDecorator('inpType', {
                rules: [
                  {
                    required: false,
                    message: '请选择材料类型',
                  },
                ],
              })(
                <Select
                  style={{ width: '100%' }}
                  placeholder="请选择材料类型"
                  onSelect={value => this.inputChange(value)}
                >
                  {inpuOption}
                </Select>
              )}
            </Form.Item>
          </Col>
        </Row>
      </div>
    );
  }
}
export default AddMetialModal;
